<template>
  <div class="myChart">
    <!-- 导航 -->
    <van-nav-bar
      class="title"
      title="市场数据"
      left-arrow
      @click-left="$router.back()"
      :fixed="true"
    />
    <!-- 菜单 -->
    <van-dropdown-menu>
      <!-- 城市 -->
      <van-dropdown-item :title="value1" ref="city">
        <van-cell center v-for="(val, key, i) in dataList" :key="i">
          <template #title>
            <!-- 排序 -->
            <van-index-bar>
              <van-index-anchor :index="key" />
              <van-cell
                v-for="(item, index) in val"
                :key="index"
                :title="item[0]"
                @click="getPost(item)"
              />
            </van-index-bar>
            <!-- 排序结束 -->
          </template>
        </van-cell>
      </van-dropdown-item>
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <!-- 内容 -->
    <div class="main" v-if="chartData.percentSalary.length">
      <!-- 1.工资输入 -->
      <div class="salary box">
        <div class="itemTite">工资输入</div>
        <!-- :data="chartData.percentSalary" -->
        <pie :data="chartData.percentSalary"></pie>
        <div class="footer">
          <p>近1年 {{ percentSample }} 份样本 / 可信度：高</p>
        </div>
      </div>
      <!-- 2.工资经验 -->
      <div class="salary box">
        <div class="itemTite">工资经验</div>
        <myline :data="chartData.experienceSalary" :smooth="false"></myline>
      </div>
      <!-- 3.历年平均工资变化趋势 -->
      <div class="change box">
        <div class="itemTite">历年平均工资变化趋势</div>
        <myline :data="chartData.yearSalary" :smooth="false"></myline>
      </div>
      <!-- 4.就业形势 -->
      <div class="situation box">
        <div class="itemTite">就业形势</div>
        <myline :data="chartData.employmentNum" :smooth="true"></myline>
        <div class="footer">
          <i class="van-icon van-icon-warning-o"></i>
          说明
          <div>
            曲线越向上代表市场需求量越大，就业情况越好。反之，代表该类职位需求量较少。该数据由各地招聘网站统计而来，可能因抓取系统稳定性等因素而致使数据偏离客观实情，仅供参考。
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入接口
import { apigetCityPost, apigetStatistics } from '@/api/find.js'
export default {
  components: {
    pie: () => import('./coms/pie.vue'),
    myline: () => import('./coms/linechart')
  },
  data () {
    return {
      dataList: {}, // 城市数据
      percentSample: 0, // 样品数量
      chartData: {
        percentSalary: [],
        experienceSalary: [],
        yearSalary: [],
        employmentNum: []
      },
      value1: '北京',
      value2: '技术经理', // type:str '职位',
      option2: [
        { text: '技术经理', value: '技术经理' },
        { text: '安全工程师', value: '安全工程师' },
        { text: '编辑', value: '编辑' },
        { text: '商业产品经理', value: '商业产品经理' },
        { text: '网络销售', value: '网络销售' },
        { text: '后台产品经理', value: '后台产品经理' },
        { text: '高级数据产品经理', value: '高级数据产品经理' },
        { text: '系统集成工程师', value: '系统集成工程师' },
        { text: '产品总监', value: '产品总监' },
        { text: '安卓开发工程师', value: '安卓开发工程师' },
        { text: 'web前端', value: 'web前端' },
        { text: '移动产品经理', value: '移动产品经理' },
        { text: '硬件测试工程师', value: '硬件测试工程师' },
        { text: '用户增长产品经理', value: '用户增长产品经理' },
        { text: 'c开发工程师', value: 'c开发工程师' },
        { text: '策略产品经理', value: '策略产品经理' },
        { text: '设计师', value: '设计师' },
        { text: '新媒体运营经理', value: '新媒体运营经理' },
        { text: '数据库开发工程师', value: '数据库开发工程师' },
        { text: '硬件开发工程师', value: '硬件开发工程师' },
        { text: '前端开发', value: '前端开发' },
        { text: 'java工程师', value: 'java工程师' },
        { text: '实施工程师', value: '实施工程师' },
        { text: '研发工程师', value: '研发工程师' },
        { text: '新媒体编辑', value: '新媒体编辑' },
        { text: '电商运营经理', value: '电商运营经理' },
        { text: '高级前端工程师', value: '高级前端工程师' },
        { text: '电商产品经理', value: '电商产品经理' },
        { text: '资深产品经理', value: '资深产品经理' },
        { text: 'web前端工程师', value: 'web前端工程师' },
        { text: '测试工程师', value: '测试工程师' },
        { text: '软件测试工程师', value: '软件测试工程师' },
        { text: '高级硬件工程师', value: '高级硬件工程师' },
        { text: '金融产品经理', value: '金融产品经理' },
        { text: '新媒体运营专员', value: '新媒体运营专员' },
        { text: 'java开发工程师', value: 'java开发工程师' },
        { text: '高级前端开发工程师', value: '高级前端开发工程师' },
        { text: 'ios开发工程师', value: 'ios开发工程师' },
        { text: '前端工程师', value: '前端工程师' },
        { text: '网络工程师', value: '网络工程师' },
        { text: '数据产品经理', value: '数据产品经理' },
        { text: '人事专员', value: '人事专员' },
        { text: '硬件工程师', value: '硬件工程师' },
        { text: 'web前端开发工程师', value: 'web前端开发工程师' },
        { text: 'android开发工程师', value: 'android开发工程师' },
        { text: '高级产品经理', value: '高级产品经理' },
        { text: '前端开发工程师', value: '前端开发工程师' },
        { text: '产品经理', value: '产品经理' }
      ]
    }
  },
  watch: {
    value2 () {
      // 获取图表数据
      this.getchart()
    }
  },
  async mounted () {
    // 获取城市数据
    apigetCityPost().then(res => {
      // console.log(res.data)
      this.dataList = res.data
    })
    // 获取图表数据
    this.getchart()
  },
  methods: {
    getPost (data) {
      this.value1 = data[0]
      const arr = data[1]
      this.value2 = data[1][0]
      this.option2 = arr.map(item => {
        return { text: item, value: item }
      })
      // 关闭菜单
      this.$refs.city.toggle()
    },
    getchart () {
      this.chartData = {
        percentSalary: [],
        experienceSalary: [],
        yearSalary: [],
        employmentNum: []
      }
      // 获取图表数据
      apigetStatistics({ city: this.value1, position: this.value2 }).then(
        res => {
          console.log(res.data)
          this.percentSample = res.data.percentSample
          // 1. 饼图
          this.chartData.percentSalary = res.data.percentSalary.map(item => {
            return { type: item.assetType, value: item.percent }
          })
          // 2.工作经验
          this.chartData.experienceSalary = res.data.experienceSalary.map(
            item => {
              return { type: item.info, value: item.value }
            }
          )
          // 3.历年平均工资变化趋势
          this.chartData.yearSalary = res.data.yearSalary.map(item => {
            return { type: item.year.slice(0, 4), value: item.salary - 0 }
          })
          // 4.趋势
          this.chartData.employmentNum = res.data.employmentNum.map(item => {
            return { type: item.date, value: item.value }
          })
          // console.log(this.chartData)
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.myChart {
  margin-top: 46px;
  /deep/ .van-index-anchor {
    background-color: #f5f5f5;
  }
  /deep/.van-index-bar__index {
    font-weight: 200;
  }
  .title {
    background-color: #ca0131;
    /deep/ .van-icon {
      color: #fff;
    }
    /deep/.van-nav-bar__title {
      color: #fff;
    }
  }
  /* 内容 */
  .main {
    padding: 15px;
    .box {
      .itemTite {
        font-size: 18px;
        margin: 10px 0;
      }
      .footer {
        font-size: 14px;
        color: #b4b4bd;
        div {
          font-size: 12px;
          color: #b4b4bd;
        }
        p {
          font-size: 12px;
          text-align: center;
          color: #b4b4bd;
        }
      }
    }
  }
}
</style>
